<route lang="yaml">
name: home
meta:
  title: 主页
</route>

<script setup lang="ts">

</script>

<template>
  <div>
    <page-header title="欢迎使用 会议管理系统" />
    <page-main title="使用帮助">
      点击左侧菜单栏内选项，可以进入对应的功能页面
    </page-main>
    <page-main title="功能介绍">
      <div class="question">
        <ul class="answer">
          <li><span>会议管理：</span>可以对会议进行管理，包括会议的新增、修改和删除</li>
          <li><span>屏幕投放：</span>在此处选择会议进行投放，投放后可以通过 <span>会议管理</span> 页面实时对会议流程进行操控，语言播报也将生效</li>
          <li><span>用户管理：</span>可以对所有用户进行管理，包括添加、删除用户、更改信息、重置密码</li>
        </ul>
      </div>
    </page-main>
  </div>
</template>

<style lang="scss" scoped>
.ecology {
  margin: 0;
  height: 100%;

  :deep(.title-container) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;

    .title-info {
      flex: 1 1 400px;
      display: flex;
      align-items: center;
      gap: 20px;

      img {
        width: 50px;
        display: block;
      }

      h1 {
        margin: 0;
        font-size: 24px;
      }

      h2 {
        margin: 0;
        font-size: 16px;
        font-weight: normal;
        color: var(--el-text-color-secondary);
      }
    }

    .el-dropdown {
      margin-left: auto;
    }
  }

  &.vue {
    h1 {
      color: #41b883;
    }
  }

  &.fa {
    h1 {
      color: #e60000;
    }
  }

  &.osa {
    h1 {
      color: #67c23a;
    }
  }

  .el-carousel {
    box-shadow: var(--el-box-shadow-light);
    transition: var(--el-transition-box-shadow);
  }

  ul li {
    line-height: 28px;
  }
}

.question {
  .answer {
    margin: 20px 0 0;
    padding-left: 20px;
    font-size: 16px;
    color: var(--el-text-color-secondary);

    li {
      margin-bottom: 10px;
      line-height: 1.5;

      &:last-child {
        margin-bottom: 0;
      }
    }

    span {
      color: var(--el-text-color-primary);
      font-weight: bold;
    }
  }
}
</style>
